<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Histogram</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="histogram.css" />
    <style>
      canvas {
        border: 3px black solid;
        background-color: #fff;
      }
    </style>
    <script src="histogram.js"></script>
  </head>

  <body>
      <div id="container">
	<h1>Simple Histogram Script</h1>
	<p>
	  The script for this page takes an array of values as its input 
	  and outputs a histogram scaled to fit nicely in the specified
	  canvas size.
	</p>
	<p>
	  At present the code assumes bin widths evenly divided into groups
	  of ten.  Future versions may improve on this.
	</p>
	<form id="inputForm">
	  Input your values in the space below, separated by commas.<br />
	  Example:  3, 27, 44, 12, 10, 6
	  <p>
	    <label>Input: </label><br />
	    <input id="histogramValues" type="text" />
	    <br /><br />
	    <button id="submitButton">Submit Data</button>
	  </p>
	</form>
	<canvas id="Canvas1" height="400" width="500">
	  Your janky old browser doesn't support the canvas element. Time 
	  for an upgrade, methinks.
	</canvas>
    </div><!--container-->
  </body>

</html>
